﻿<template>
    <l-layout class="l-tab-page" v-show="!lr_loadPage" >
        
        <l-panel>
            <template #toolLeft >
                <l-query2 :items="queryItems" :formData="queryData" :loading="tableLoading" @search="handleSearch">
                    <template #f_text >
                        <el-input v-model="queryData.f_text" :placeholder="$t('请输入')" />
                    </template>
                    <template #f_textarea >
                        <el-input v-model="queryData.f_textarea" :placeholder="$t('请输入')"/>
                    </template>
                    <template #f_edit >
                        <el-input v-model="queryData.f_edit" :placeholder="$t('请输入')" />
                    </template>
                    <template #f_Num >
                        <el-input-number controlsPosition="default" v-model="queryData.f_Num" :placeholder="$t('请输入')" />
                    </template>
                    <template #f_radio >
                        <l-select :options="f_radioOptions" v-model="queryData.f_radio" />
                    </template>
                    <template #f_checkbox >
                        <l-select :multiple="true" :options="f_checkboxOptions" v-model="queryData.f_checkbox" />
                    </template>
                    <template #f_select >
                        <l-select :options="f_selectOptions" v-model="queryData.f_select" />
                    </template>
                    <template #f_select2 >
                        <l-select :multiple="true" :options="f_select2Options" v-model="queryData.f_select2" />
                    </template>
                    <template #f_treeSelect >
                        <l-tree-select :options="f_treeSelectOptions" v-model="queryData.f_treeSelect" />
                    </template>
                    <template #f_layerSelect >
                        <l-layer-select 
                            v-model="queryData.f_layerSelect" 
                            :isPage="true"
                            :height="504"
                            :width="960"
                            :columns="[{'label':'第0列','prop':'f_ItemValue','valueKey':'','width':100,'align':'left','hidden':false}]"
                            :options="f_layerSelectOptions"

                           />
                    </template>
                    <template #f_time >
                        <l-time isRange format="HH:mm:ss" v-model="queryData.f_time" :placeholder="$t('请选择')" />
                    </template>
                    <template #f_dateQRange >
                        <l-date format="yyyy-MM-dd"  dateType="daterange" v-model="queryData.f_dateQRange" :placeholder="$t('请选择')" />
                    </template>
                    <template #f_areaSelect >
                        <l-area-select v-model="queryData.f_areaSelect" />
                    </template>
                    <template #f_company >
                        <l-company-select v-model="queryData.f_company" />
                    </template>
                    <template #f_department >
                        <l-department-select v-model="queryData.f_department" />
                    </template>
                    <template #f_user >
                        <l-user-select v-model="queryData.f_user" />
                    </template>
                    <template #f_ccompany >
                        <l-company-select v-model="queryData.f_ccompany" />
                    </template>
                    <template #f_cdepartment >
                        <l-department-select v-model="queryData.f_cdepartment" />
                    </template>
                    <template #f_cuser >
                        <l-user-select v-model="queryData.f_cuser" />
                    </template>
                    <template #f_cdateQRange >
                        <l-date  dateType="datetimerange" v-model="queryData.f_cdateQRange" :placeholder="$t('请选择')" />
                    </template>
                    <template #f_muser >
                        <l-user-select v-model="queryData.f_muser" />
                    </template>
                    <template #f_mdateQRange >
                        <l-date  dateType="datetimerange" v-model="queryData.f_mdateQRange" :placeholder="$t('请选择')" />
                    </template>
                    <template #f_code >
                        <el-input v-model="queryData.f_code" :placeholder="$t('请输入')" />
                    </template>
                    <template #f_icon >
                        <l-input-icon v-model="queryData.f_icon" />
                    </template>
                    <template #f_swtich >
                        <el-switch :activeValue="1" :inactiveValue="0" v-model="queryData.f_swtich" />
                    </template>
                    <template #f_rate >
                        <el-rate :max="5" :lowThreshold="2" :highThreshold="4" voidColor="#C6D1DE" disabledVoidColor="#EFF2F7" textColor="#1F2D3D" voidIconClass="el-icon-star-off" disabledVoidIconClass="el-icon-star-on" :allowHalf="false" :showText="false" :showScore="false" :colors="['#F7BA2A','#F7BA2A','#F7BA2A']" :iconClasses="['el-icon-star-on','el-icon-star-on','el-icon-star-on']" :texts="['极差','失望','一般','满意','惊喜']" v-model="queryData.f_rate" />
                    </template>
                    <template #f_swtich2 >
                        <el-slider :min="0" :max="100" :step="1" :showStops="false" :showInput="false" :showInputControls="true" :showTooltip="true" v-model="queryData.f_swtich2" />
                    </template>
                    <template #f_color >
                        <l-input-color v-model="queryData.f_color" />
                    </template>
                </l-query2>
            </template>
            <template #toolRight >
                <l-tool-btns  :hasTableSetting="true" @setting="lr_handleSettingTable" @click="handleAdd()" >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table 
                ref="mainTable" 
                :loading="tableLoading" 
                :columns="lr_getPageColumns(columns)" 
                :dataSource="tableData"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"
                @loadPageData="turnTablePage"
                >
                <template v-for="(col,index) in lr_tableColumnsByToLabel(lr_getPageColumns(columns))" v-slot:[col.prop]="scope" >
                    <l-value-to-label
                    :value="scope.row[col.prop]"
                    :type="col.dataType"
                    :code="col.dataCode"
                    :valueKey="col.valueKey"
                    :labelKey="col.labelKey"
                    :options="col.options"
                    :format="col.format"
                    :setting="col.setting"
                    :key="index" ></l-value-to-label>
                </template>
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <!--表单-->
        <l-dialog :title="$t(formTitle)"
                  :visible.sync="formVisible"
                  :height="600"
                  :width="800"
                  @ok="handleSave"
                  @close="handleCloseForm"
                  @opened="handleOpenedForm">
            <my-form ref="form" ></my-form>
        </l-dialog>
        
    </l-layout>
</template>

<script>
    import MyForm from './form'
    const api = window.$api.test.myTest

    export default {
        components: {
            MyForm,
            
        },
        data() {
            return {
                lr_isPage: true,
                moduleCode: 'test_myTest',
                
                // 查询参数
                queryData:{
                    f_text:'',
                    f_textarea:'',
                    f_edit:'',
                    f_Num:'',
                    f_radio:'',
                    f_checkbox:'',
                    f_select:'',
                    f_select2:'',
                    f_treeSelect:'',
                    f_layerSelect:'',
                    f_time:'',
                    f_dateQRange:'',
                    f_areaSelect:'',
                    f_company:'',
                    f_department:'',
                    f_user:'',
                    f_ccompany:'',
                    f_cdepartment:'',
                    f_cuser:'',
                    f_cdateQRange:'',
                    f_muser:'',
                    f_mdateQRange:'',
                    f_code:'',
                    f_icon:'',
                    f_swtich:'',
                    f_rate:0,
                    f_swtich2:0,
                    f_color:'',
                },

                queryItems:[
                    {label:'单行文本',prop:'f_text'},
                    {label:'多行文本',prop:'f_textarea'},
                    {label:'编辑器',prop:'f_edit'},
                    {label:'计数器',prop:'f_Num'},
                    {label:'单选框组',prop:'f_radio'},
                    {label:'多选框组',prop:'f_checkbox'},
                    {label:'下拉选择',prop:'f_select'},
                    {label:'下拉多选',prop:'f_select2'},
                    {label:'树形选择',prop:'f_treeSelect'},
                    {label:'弹窗选择',prop:'f_layerSelect'},
                    {label:'时间选择',prop:'f_time'},
                    {label:'日期选择',prop:'f_dateQRange'},
                    {label:'省市区',prop:'f_areaSelect'},
                    {label:'公司选择',prop:'f_company'},
                    {label:'部门选择',prop:'f_department'},
                    {label:'人员选择',prop:'f_user'},
                    {label:'所属公司',prop:'f_ccompany'},
                    {label:'所属部门',prop:'f_cdepartment'},
                    {label:'创建人员',prop:'f_cuser'},
                    {label:'创建时间',prop:'f_cdateQRange'},
                    {label:'修改人员',prop:'f_muser'},
                    {label:'修改时间',prop:'f_mdateQRange'},
                    {label:'单据编码',prop:'f_code'},
                    {label:'图标',prop:'f_icon'},
                    {label:'开关',prop:'f_swtich'},
                    {label:'评分',prop:'f_rate'},
                    {label:'滑块',prop:'f_swtich2'},
                    {label:'颜色选择',prop:'f_color'},
                ],

                // 表格参数
                tableLoading: false,
                tableData:[],
                tableTotal:0,
                tableCurrentPage:1,
                tablePageSize:50,
                columns: [
                    {label:'单行文本',prop:'f_text',width:120,align:'left',dataType:'input'},
                    {label:'多行文本',prop:'f_textarea',width:120,align:'left',dataType:'textarea'},
                    {label:'编辑器',prop:'f_edit',width:120,align:'left',dataType:'texteditor'},
                    {label:'计数器',prop:'f_Num',width:120,align:'left',dataType:'number'},
                    {label:'单选框组',prop:'f_radio',width:120,align:'left',dataType:'mydata',options:[{"value":"1","label":"选项1"},{"value":"2","label":"选项2"},{"value":"3","label":"选项3"}]},
                    {label:'多选框组',prop:'f_checkbox',width:120,align:'left',dataType:'mydata',options:[{"value":"1","label":"选项1"},{"value":"2","label":"选项2"},{"value":"3","label":"选项3"}]},
                    {label:'下拉选择',prop:'f_select',width:120,align:'left',dataType:'dataSource',dataCode:'dataitem',valueKey:'f_itemvalue',labelKey:'f_itemname'},
                    {label:'下拉多选',prop:'f_select2',width:120,align:'left',dataType:'mydata',options:[{"value":"1","label":"选项1"},{"value":"2","label":"选项2"},{"value":"3","label":"选项3"}]},
                    {label:'树形选择',prop:'f_treeSelect',width:120,align:'left',dataType:'mydata',options:[{"label":"选项一","value":"0","children":[{"label":"选项1-1","value":"11"},{"label":"选项1-2","value":"12"}]},{"label":"选项二","value":"1"},{"label":"选项三","value":"2"}]},
                    {label:'弹窗选择',prop:'f_layerSelect',width:120,align:'left',dataType:'dataItem',dataCode:'DbVersion'},
                    {label:'时间选择',prop:'f_time',width:120,align:'left',dataType:'time'},
                    {label:'时间范围',prop:'f_time2',width:120,align:'left',dataType:'timerange'},
                    {label:'日期选择',prop:'f_date',width:120,align:'left',dataType:'datetime',format:'yyyy-MM-dd'},
                    {label:'日期范围',prop:'f_daterange',width:120,align:'left',dataType:'datetimerange'},
                    {label:'省市区',prop:'f_areaSelect',width:120,align:'left',dataType:'areas'},
                    {label:'地图选择',prop:'f_map',width:120,align:'left',dataType:'layerbmap'},
                    {label:'文件上传',prop:'f_file',width:120,align:'left',dataType:'file'},
                    {label:'图片上传',prop:'f_img',width:120,align:'left',dataType:'img'},
                    {label:'公司选择',prop:'f_company',width:120,align:'left',dataType:'company'},
                    {label:'部门选择',prop:'f_department',width:120,align:'left',dataType:'department'},
                    {label:'人员选择',prop:'f_user',width:120,align:'left',dataType:'user'},
                    {label:'所属公司',prop:'f_ccompany',width:120,align:'left',dataType:'company'},
                    {label:'所属部门',prop:'f_cdepartment',width:120,align:'left',dataType:'department'},
                    {label:'创建人员',prop:'f_cuser',width:120,align:'left',dataType:'user'},
                    {label:'创建时间',prop:'f_cdate',width:120,align:'left',dataType:'datetime',format:'yyyy-MM-dd HH:mm:ss'},
                    {label:'修改人员',prop:'f_muser',width:120,align:'left',dataType:'user'},
                    {label:'修改时间',prop:'f_mdate',width:120,align:'left',dataType:'datetime',format:'yyyy-MM-dd HH:mm:ss'},
                    {label:'单据编码',prop:'f_code',width:120,align:'left',dataType:'encode'},
                    {label:'GUID主键',prop:'f_Id',width:120,align:'left',dataType:'guid'},
                    {label:'图标',prop:'f_icon',width:120,align:'left',dataType:'icon'},
                    {label:'评分',prop:'f_rate',width:120,align:'left',dataType:'rate',setting:{"max":5,"allowHalf":false,"lowThreshold":2,"highThreshold":4,"colors":["#F7BA2A","#F7BA2A","#F7BA2A"],"voidColor":"#C6D1DE","disabledVoidColor":"#EFF2F7","iconClasses":["el-icon-star-on","el-icon-star-on","el-icon-star-on"],"voidIconClass":"el-icon-star-off","disabledVoidIconClass":"el-icon-star-on","showText":false,"showScore":false,"textColor":"#1F2D3D","texts":["极差","失望","一般","满意","惊喜"],"csType":"int"}},
                    {label:'开关',prop:'f_swtich',width:120,align:'left',dataType:'switch',setting:{"width":40,"activeIconClass":"","inactiveIconClass":"","activeText":"","inactiveText":"","valueType":"number","activeValue":"1","inactiveValue":"0","activeColor":"#409EFF","inactiveColor":"#C0CCDA","csType":"int"}},
                    {label:'滑块',prop:'f_swtich2',width:120,align:'left',dataType:'slider'},
                    {label:'颜色选择',prop:'f_color',width:120,align:'left',dataType:'color'},
                ],
                tableBtns:[
                    {prop:'Edit',label:'编辑'},
                    {prop:'Delete',label:'删除'},
                ],

                // 表单参数
                formVisible:false,
                formTitle:'',
                formEditRow:null,
                formEdit:false,
            }
        },
        computed: {
            

            f_radioOptions(){
                return [{"value":"1","label":"选项1"},{"value":"2","label":"选项2"},{"value":"3","label":"选项3"}]
            },
            f_checkboxOptions(){
                return [{"value":"1","label":"选项1"},{"value":"2","label":"选项2"},{"value":"3","label":"选项3"}]
            },
            f_selectOptions(){
                return this.lr_DataSourceOptions(this.lr_dataSourceData['dataitem'],'f_itemvalue','f_itemname')
            },
            f_select2Options(){
                return [{"value":"1","label":"选项1"},{"value":"2","label":"选项2"},{"value":"3","label":"选项3"}]
            },
            f_treeSelectOptions(){
                return [{"label":"选项一","value":"0","children":[{"label":"选项1-1","value":"11"},{"label":"选项1-2","value":"12"}]},{"label":"选项二","value":"1"},{"label":"选项三","value":"2"}]
            },
            f_layerSelectOptions(){
                return this.lr_dataItemOptions(this.lr_dataItem['DbVersion'])
            },

        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.loadTableData()

                this.lr_loadDataItem('DbVersion')
                this.lr_loadDataSourceData('dataitem')

            },
            
            handleSearch(){
                this.loadTableData()
            },
            turnTablePage({rows}){
                this.tablePageSize = rows
                this.loadTableData(true)
            },
            async loadTableData(isNotFirst){
                if(!isNotFirst){
                    this.tableCurrentPage = 1
                }
                this.tableLoading = true
                let queryData = this.$deepClone(this.queryData)
                
                queryData.rows = this.tablePageSize
                queryData.page = this.tableCurrentPage
                queryData.sidx = 'f_text DESC'
                let data = await this.$awaitWraper(api.getPage(queryData))
                if(data != null){
                    this.tableData = data.rows
                    this.tableTotal = data.records
                }
                else{
                    this.tableData = []
                }
                this.tableLoading = false
            },

            handleAdd(){
                this.formEdit = false
                this.handleShowForm()
            },
            handleEdit($index,row){
                this.formEdit = true
                this.formEditRow = row
                this.handleShowForm()
            },
            handleDelete($index,row){
                this.$confirm(this.$t('此操作将永久删除该数据, 是否继续?'), this.$t('提示'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
                }).then(async () => {
                    this.tableData.splice($index,1);
                    this.tableTotal--
                    await api.remove(row.f_Id)
                    this.$message({
                        type: 'success',
                        message: this.$t('删除成功!')
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: this.$t('已取消删除!')
                    })
                })
            },

            async handleSave(showLoading, hideLoading) {
                showLoading('保存数据中...')
                if (await this.$refs.form.validateForm()) {
                    const res = await this.$refs.form.saveForm({ keyValue: this.formEdit? this.formEditRow.f_Id :'', isEdit: this.formEdit })
                    if (res) {
                        const msg = this.formEdit ? '更新成功!' : '新增成功!'
                        this.$message({
                            type: 'success',
                            message: this.$t(msg)
                        })
                        this.loadTableData()
                        this.formVisible = false
                    }
                }
                hideLoading()
            },

            handleShowForm(text) {
                this.formTitle = text
                this.formVisible = true
            },
            async handleOpenedForm(showLoading, hideLoading) {
                if (this.formEdit) {
                    showLoading('加载数据中...')
                    this.$refs.form.loadFormData({ keyValue: this.formEditRow.f_Id })
                    hideLoading()
                }
            },
            handleCloseForm() {
                this.$refs.form.resetForm()
            }
        }
    }
</script>
